<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--秒杀页面</title>
    <link rel="icon" href="/assets/img/favicon.ico">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-jquery.autocomplete.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-index.css"/>
</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"></div>
<script type="text/javascript">$("#nav-bottom").load("top.html");</script>


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/jquery.autocomplete.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="js/pages/seckill-index.js"></script>
<script>
    $(function () {
        $("#code").hover(function () {
            $(".erweima").show();
        }, function () {
            $(".erweima").hide();
        });
    })
</script>
</body>

<div class="py-container index" id="seckApp">
    <!--banner-->
    <div class="banner">
        <img src="img/_/banner.png" class="img-responsive" alt="">
    </div>

    <!--商品列表-->
    <div class="goods-list">
        <ul class="seckill" id="seckill">
            <li class="seckill-item" v-for="(item,index) in items" :key="index">
                <div class="pic">
                    <a :href="'/item/seckill'+item.id+'.html'" target='_blank'>
                        <img :src="item.images" alt=''>
                    </a>
                </div>
                <div class="intro">
                    <a :href="'/item/seckill'+item.id+'.html'" style="color: #2b2b2b;text-decoration:none"  target='_blank'>
                        <span>{{ item.title }}</span>
                    </a>
                </div>
                <div class='price'><b class='sec-price'>{{ ly.formatPrice(item.price) }}</b>
                    <b class='ever-price'>{{ Math.ceil(ly.formatPrice(item.price + (item.price * 0.1)))}}.00</b></div>
                <div class='num'>
                    <div>已售{{Math.ceil((1 - (item.stock / item.totalStock).toFixed(2)) * 100)}}%</div>
                    <div class='progress'>
                        <div class='sui-progress progress-danger'><span
                                :style="{width:((1-(item.stock/item.totalStock).toFixed(2))*100)+'%'}"
                                class='bar'></span></div>
                    </div>
                    <div>剩余<b class='owned'>{{ item.stock }}</b>件</div>
                </div>
                <a class='sui-btn btn-block btn-buy' :href="'/item/seckill'+item.id+'.html'" target='_blank'>立即抢购</a>
            </li>
        </ul>
    </div>
    <div class="cd-top">
        <div class="top">
            <img src="img/_/gotop.png"/>
            <b>TOP</b>
        </div>
        <div class="code" id="code">
            <span><img src="img/_/code.png"/></span>
        </div>
        <div class="erweima">
            <img src="img/_/erweima.jpg" alt="">
            <s></s>
        </div>
    </div>
</div>

<script type="text/javascript">
    var Vm = new Vue({
        el: "#seckApp",
        data: {
            ly,
            items: [],
        },
        created() {
            this.getSeckillItem();
        },

        methods: {
            getSeckillItem() {
                axios.get('http://api.leyou.com/seckill/seckillModule/list').then(resp => {
                    //赋值给data
                    this.items = resp.data
                }).catch(e => {
                    console.log('加载商品失败');
                })
            },

        },

        components: {
            shortcut: () => import("/js/pages/shortcut.js")
        }
    })
</script>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</html>